import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get_rx/src/rx_types/rx_types.dart';
import 'package:hive/hive.dart';
import 'package:mobile_vpn/pages/set_up/set_logic.dart';
import '../../common/cpn/cpn_view_state.dart';
import '../../common/cpn/sliver_app_bar.dart';
import '../../theme/color_palettes.dart';

class ThemeColorPage extends CpnViewState<SetLogic> {
 ThemeColorPage({Key? key}) : super(key: key, bindViewState: false);
  final RxInt selectedIndex = (
      Hive.box<int>('selectedIndex').get('selectedIndex') ?? 1
  ).obs;


  @override
  Widget buildBody(BuildContext context) {
    return CustomScrollView(
      slivers: [
        commonSliverAppBar(
          title: '主题颜色',
          leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ),
        SliverToBoxAdapter(
          child: Padding(
            padding: EdgeInsets.all(20.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '选择您喜欢的主题颜色',
                  style: TextStyle(
                    fontSize: 16,
                    color: ColorPalettes.instance.secondText,
                  ),
                ),
                SizedBox(height: 20.h),
                // 主题颜色网格
                GridView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(), // 禁止滚动
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3, // 每行3个颜色
                    crossAxisSpacing: 20.w, // 水平间距
                    mainAxisSpacing: 20.h, // 垂直间距
                    childAspectRatio: 1.5, // 宽高比
                  ),
                  itemCount: _themeColors.length,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      onTap: () {
                        // 更新应用主题颜色
                        _updateThemeColor(_themeColors[index]);
                        _saveSelectedIndex(index);
                      },
                      child: Container(
                        decoration: BoxDecoration(
                          color: _themeColors[index],
                          borderRadius: BorderRadius.circular(10.r),
                          border: index == selectedIndex.value
                              ? Border.all(
                            color: ColorPalettes.instance.firstText,
                            width: 3.w,
                          )
                              : null,
                        ),
                        child: Center(
                          child: index == selectedIndex.value
                              ? Icon(
                            Icons.check,
                            color: ColorPalettes.instance.primary,
                            size: 24.sp,
                          )
                              : null,
                        ),
                      ),
                    );
                  },
                ),
                SizedBox(height: 40.h),
                // 预览区域
                Text(
                  '预览效果',
                  style: TextStyle(
                    fontSize: 16,
                    color: ColorPalettes.instance.firstText,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 20.h),
                Container(
                  width: double.infinity,
                  padding: EdgeInsets.all(20.w),
                  decoration: BoxDecoration(
                    color: _themeColors[selectedIndex.value].withOpacity(0.2),
                    borderRadius: BorderRadius.circular(10.r),
                  ),
                  child: Text(
                    '这是当前主题颜色的预览效果。',
                    style: TextStyle(
                      fontSize: 14,
                      color: ColorPalettes.instance.firstText,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  // 主题颜色列表
  final List<Color> _themeColors = [
    Colors.black,
    Colors.white,
  ];

  // 颜色与主题色类型的映射
  final Map<Color, PalettesStyle> _colorToThemeMap = {
    Colors.black: PalettesStyle.dark,
    Colors.white: PalettesStyle.lightDefault,
  };

  // 更新应用主题颜色
  void _updateThemeColor(Color color) {
    // 根据颜色获取对应的主题色类型
    PalettesStyle? themeStyle = _colorToThemeMap[color];
    if (themeStyle != null) {
      // 调用 ColorPalettes 的方法更新主题色
      ColorPalettes.instance.changeTheme(themeStyle);
    }
  }

  // 保存选定的颜色索引
  Future<void> _saveSelectedIndex(int index) async {
    final box = await Hive.openBox<int>('selectedIndex');
    await box.put('selectedIndex', index);
    selectedIndex.value = index;
    print(selectedIndex.value);
  }
}


